
<style>
.nav li {
	{if $reply['addpvapp'] == 1}
		width: 20%;
	{else}
		width: 25%;
	{/if}
	float: left;
	text-align: center;
}
.nav > li > a {
  position: relative;
  display: block;
  padding: 1px;
}
 .fmore {
  position: absolute;
  bottom: 100px;
  left:50%;
  width:100%;
  background:#000;
}
 .fmore li {width: 100%;} 
 
 
 
 *{padding:0; margin:0;}
.bg {
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.8;
}
ul, ol, li, dl {
list-style-type: none;
}
.box {
width: 100%;
display: -webkit-box;
display: -moz-box;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.box > * {
-webkit-box-flex: 1;
-moz-box-flex: 1;
}

a {
text-decoration: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.35);
}

a {
text-decoration: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.35);
}

.nav4{
  height:45px;
}
.nav4 ul{
  position:fixed;
  z-index:200;
  bottom:0;
  left:0;
  width:100%
}
.nav4 li{
 /** border:1px solid rgba(190,190,190,1); 
  -webkit-box-shadow:inset 0 0 3px #fff;**/
  height:50px;
  border-bottom:0;
  border-right:0;
  position:relative;
}
.nav4 li:nth-of-type(1){border-left;0;}
.nav4 li>a{
  font-size:15px;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  /*border:1px solid #f9f8f9;*/
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  border-bottom:0;
  display:block;
  line-height:15px;
  text-align:center;
  background: -webkit-gradient(linear, 0 0, 0 100%, from({if empty($bgarr['foobg1'])}#943DBE{else}{$bgarr['foobg1']}{/if}), to({if empty($bgarr['foobg1'])}#32014A{else}{$bgarr['foobg1']}{/if}), color-stop(35% ,{if empty($bgarr['foobg1'])}#32014A{else}{$bgarr['foobg1']}{/if}), color-stop(50%, {if empty($bgarr['foobg1'])}#32014A{else}{$bgarr['foobg1']}{/if}) );
}
.nav li .a {
  display: block;
  color: {if empty($bgarr['foobgtextn'])}#fff{else}{$bgarr['foobgtextn']}{/if};
}
.nav li.cur .a {
  color: {if empty($bgarr['foobgtexty'])}#e2216f{else}{$bgarr['foobgtexty']}{/if};
}
.nav4 li>a:only-child span{
  background:none;
  padding-left:0;
}
.nav4 li>a.on + dl{
  display: block;
}
.nav4 li>a span{
  color: #4f4d4f;
  display: inline-block;
  padding-left: 15px;
  background: url(../addons/fm_photosvote/template/mobile/photos/imgs/1.svg#2) no-repeat 4px 18px;
  -webkit-background-size: 9px auto;
  text-shadow:0px 1px 0px #ffffff;
}

.nav li a::before { 
  margin: 0px auto 0px;
  
}
/***********************/
.nav4 dl{
  display:none;
  position:absolute;
  z-index:220;
  bottom:60px;
  left:5%;
  width:100px;
  margin-left:-50px;
  /*min-height:100px;*/
  background:{if empty($bgarr['foobgmorecolor'])}#e4e3e2{else}{$bgarr['foobgmorecolor']}{/if};
  /*border:1px solid #afaeaf;*/
  border-radius:5px;
  -webkit-box-shadow:inset 0 0 3px #fff;
  
  background:url({if empty($bgarr['foobgmore'])}../addons/fm_photosvote/template/mobile/photos/imgs/2.svg{else}{$bgarr['foobgmore']}{/if}#3) no-repeat center center;
  -webkit-background-size:100%;
  background-size:100%;
}
/*, .nav4 dl:after*/
.nav4 dl:before{
  content:"";
  display:inline-block;
  position:absolute;
  z-index:240;
  bottom:0;
  left:80%;
  /*width:0;
  height:0;
  border:8px solid red;
  border-color:#afaeaf transparent transparent transparent;
  margin-left:-8px;
  margin-bottom:-16px;*/
  width:10px;
  height:8px;
  background: url(../addons/fm_photosvote/template/mobile/photos/imgs/1.svg#2) no-repeat center -55px;
  -webkit-background-size: 10px auto;
  bottom: -7px;
  margin-left: -5px;
}
/*.nav4 dl:after{
  z-index:241;
  border-color:#e4e3e2 transparent transparent transparent;
  margin-bottom:-15px;
}*/
.nav4 dl dd{
  line-height:45px;
  text-align:center;
  background:-webkit-gradient(linear, 0 0, 100% 0, from(rgba(194,194,194,0.8)), to(rgba(194,194,194,0.8)), color-stop(50%, rgba(194,194,194,0.8)));
  background-size:80% 1px;
  background-repeat:no-repeat;
  background-position: center bottom;
  /*background: url(imgs/3.svg#4) no-repeat center bottom;
  -webkit-background-size:100px 1px;*/
}
.nav4 dl dd:last-of-type{
  background:none;
}
.nav4 dl dd a{
  font-size: 15px;
  display:block;
  color:{if empty($bgarr['foobgtexty'])}#4f4d4f{else}{$bgarr['foobgtexty']}{/if};
  
  text-shadow:0px 1px 0px #ffffff;
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav4 .masklayer_div{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 180;
  background: rgba(0,0,0,0);
}
.nav4 .masklayer_div.on{display: block;}
 
 
</style>
<div class="footer">	
	<div data-role="widget" data-widget="nav4" class="nav4">
	<nav>
        <div id="nav4_ul" class="nav_4">
          <ul class="box nav">
			<li {if $_GPC['do'] == 'photosvoteview'}class="cur"{/if}><a href="{php echo $this->createMobileUrl('photosvoteview', array('rid' => $rid))}" class="a">首页</a></li>
			<li id="ssuo" onclick="button3()"><a href="javascript:;" class="a">搜索</a></li>
			<li {if $_GPC['do'] == 'paihang'}class="cur"{/if}><a href="{php echo $this->createMobileUrl('paihang', array('rid' => $rid))}" class="a">排行榜</a></li>
			{if $reply['addpvapp'] == 1}
				{if !empty($mygift)}
					<li {if $_GPC['do'] == 'Tuser'}class="cur"{/if}><a href="{php echo $this->createMobileUrl('Tuser', array('rid' => $rid, 'tfrom_user' => $from_user_oauth2))}" class="a">{if $_GPC['do'] <> 'Tuser'}我的{else}{if $from_user_oauth2 == $tfrom_user}我的{else}Ta的{/if}{/if}</a></li>
				{else}
					<li {if $_GPC['do'] == 'reg'}class="cur"{/if}><a href="{php echo $this->createMobileUrl('reg', array('rid' => $rid))}" class="a">报名</a></li>
				{/if}
			{/if}		
			 <li>
				  <a href="javascript:;" class="a">更多</a>
					<dl>
						{if (!empty($reply['sharename']))}
							<dd ><a href="javascript:;" id="share" onclick="button2()"><img src="{php echo 	toimage($reply['sharename'])}"><span>{$reply['sharename']}</span></a></dd>
						 {/if}
						 {if ($reply['ishuodong'] == 1 && !empty($reply['huodongurl']))}
							<dd><a href="{$reply['huodongurl']}"><span>{php echo cutstr($reply['huodongname'])}</span></a></dd>
						 {/if}
						 <dd><a href="{php echo $this->createMobileUrl('des', array('rid' => $rid))}"><span>活动详情</span></a></dd>
						
					 </dl>
			  </li>
                                              
            </ul>
        </div>
      </nav>
	 <div id="nav4_masklayer" class="masklayer_div"> </div>
	 </div>
	 <div id="mcover" onclick="weChat()" style="display:none;  z-index: 200000;">
				<img src="../addons/fm_photosvote/template/mobile/photos/guide.png" />
		 </div>
	<div class="cover" onclick="weChat1()" style="display:none;"></div>
	<div class="search">
		<div class="s_up">
			<form action="index.php" method="get">
				<input type="hidden" name="i" value="{$uniacid}" />
				<input type="hidden" name="c" value="entry" />
				<input type="hidden" name="m" value="fm_photosvote" />
				<input type="hidden" name="do" value="photosvoteview" />
				<input type="hidden" name="rid" value="{$rid}" />		
						   
								
				<input type="text" name="keyword" placeholder="请输入您要查找的编号或姓名" class="txt" id="txt" />
				<input type="submit" value="搜索" class="btns" />
					
				
			</form>	
			
		</div>
		<p class="tip">搜索选手编号(ID)或姓名，为她投票吧！</p>
	</div>
</div>

 <script type="text/javascript">

var nav4 =(function(){
  bindClick = function(els, mask){
    if(!els || !els.length){return;}
    var isMobile = "ontouchstart" in window;
    for(var i=0,ci; ci = els[i]; i++){
      ci.addEventListener("click", evtFn, false);
    }

    function evtFn(evt, ci){
      ci =this;
      for(var j=0,cj; cj = els[j]; j++){
        if(cj != ci){
          console.log(cj);
          cj.classList.remove("on");
        }
      }
      if(ci == mask){mask.classList.remove("on");return;}
      switch(evt.type){
        case "click":
          var on = ci.classList.toggle("on");
          mask.classList[on?"add":"remove"]("on");
        break;
      }
    }
    mask.addEventListener(isMobile?"touchstart":"click", evtFn, false);
  }
  return {"bindClick":bindClick};
})();
 
 
        nav4.bindClick(document.getElementById("nav4_ul").querySelectorAll("li>a"), document.getElementById("nav4_masklayer"));
      </script>